<template>
  <div class="schemePane">
    <div class="schemeTitle"><i class="el-icon-football"></i>足球方案</div>

   <div class="expertPane">
     <el-tabs v-model="activeName" @tab-click="handleClick" class="expertInfo">
      <el-tab-pane label="竟足" name="first" class="guessFootball">
        <div class="expert" v-for="(expert,index) in expertImgs">
          <a href="#" title="点击查看">
            <div class="imgDiv">
              <img :src="getImgUrl(expert.eimg)">
            </div>
          </a>
            <div  class="nameDiv">
              {{expert.ename}}
            </div>
            <div class="lebDiv">
              {{expert.lename}}
            </div>
        </div>
        <div class="moreExperts"><a href="#"><div>···</div></a><div>更多专家</div></div>
      </el-tab-pane>
      <el-tab-pane label="北单" name="second">北单</el-tab-pane>
      <el-tab-pane label="双料" name="third">双料</el-tab-pane>
      <el-tab-pane label="任九" name="fourth">任九</el-tab-pane>
    </el-tabs>
     <div class="expertscheme">
     <div class="schemeInfo" v-for="(expert,index) in expertImgs" >
       <div class="schemeImgDiv">
         <img :src="getImgUrl(expert.eimg)">
       </div>
       <div class="expertName">
       {{expert.ename}}
       </div>
       <div class="expertleb">
         {{expert.lename}}
       </div>
       <div class="schemesTitle">
        {{programmes[index].prtitle}}
       </div>
       <div class="schemesTime">

         <div>
           {{programmes[index].ptype}}
         </div>
         <div>
           {{programmes[index].prdate}}
         </div>

         <div>
           {{programmes[index].prprice}}
         </div>
         <div>
           查看人数：{{programmes[index].prbuynum}}
         </div>
       </div>


     </div>
     </div>
     <div class="rankingList">
       <rankingList></rankingList>
     </div>

   </div>



  </div>

</template>

<script>
  import api from "../../../../axios/api";
  import rankingList from "./rankingList";

  export default {
    name: "scheme",
    data(){
      return{
        activeName: 'first',
        expertImgs:[],
        programmes:[]
      }
    },
    components:{
      rankingList
    },
    methods:{
      handleClick(tab, event) {
        console.log(tab, event);
      },
      getExpertImg() {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/expertImg", null, "post")
          .then(res => {
             console.log(res)
            this.expertImgs = res.tList;
          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },
      getExpertScheme() {
        //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
        api.setDataFromAxios("/programmes", null, "post")
          .then(res => {
            this.programmes = res.tList;
            console.log( this.programmes)

          });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
      },

      getImgUrl: function (uimg) {
        return  "/static/images/expertsImg/" + uimg;
      },
    },
    created(){
      this.getExpertImg();
      this.getExpertScheme();
    }
  }
</script>

<style scoped lang="stylus">

  .schemePane
    margin-bottom 20px
    .schemeTitle
      color black
      text-align left
      font-size 16px
      font-weight 600;
      padding 5px 0  10px 0

    .expertPane
       content:""
       display:block
       clear:both
      .rankingList
        float: right;
      .expertscheme
        float: left;
        height 760px
        width 700px
        .schemeInfo
          box-shadow: 0 1px 5px 1px #d4d4d4;

          margin 10px 20px 20px 0
          float left
          width 320px
          height 160px
          .schemeImgDiv
            margin 5px 0 0 5px
            float: left;
            width 50px
            height 50px
            img
              border-radius 30px
              width 50px
              height 50px
          .expertName
            margin 3px
            width 130px
            font-size 15px
          .expertleb
            width 130px
            color #666666
            font-size 14px
          .schemesTitle
            height 38px
            width 300px
            margin 10px 0 0 10px
            font-size 14px
            text-align left;
          .schemesTime
            content:""
            display:block
            clear:both
            height 50px
            margin-top 10px
            font-size 14px
            :nth-child(2){
              width 100px
              float right
              font-size 14px

            }
            :nth-child(1){
              float left
              width 200px
            }
            :nth-child(3) {
              float: left;
              padding 10px
              height 16px
              width 100px
              font-size 14px
              content:""
              display:block
              clear:both
              color #d93635
            }
            :nth-child(4) {
              padding 10px
              font-size 14px
              width 100px
              float: right;
              text-align right;
            }
      .expertInfo
        margin-bottom 10px
        .guessFootball
          .expert
            float: left;
            a
              text-decoration: none;
            .nameDiv
              padding 5px
              color black
              font-size 14px


            .lebDiv
              width 75px
              color #d93635

              margin-left 17px
              font-size 15px
              border-radius 4px
              border solid #d93635 1px

            .imgDiv
              width 110px
              height 70px
              img
                border-radius 45px
                width 70px
                height 70px
          .moreExperts

            :nth-child(1) {
                margin-top 30px
                color #d93635
                font-size 30px
            }
            :nth-child(2) {
              font-size 14px
              padding 5px
            }

            a
              text-decoration: none;

            position: absolute;
            right 15px
            width 110px
            height 121px





</style>
